<template>
  <div class="currency">
    <div class="currency-logo">
      <img src="@/assets/images/logo-wone.png" alt="" />
    </div>
    <div class="name">WONE</div>
    <div class="price">
      <div class="price-new">0.00</div>
      <div class="price-old">$ 0.00</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    test: {
      type: String,
      default() {
        return "";
      },
      required: false,
    },
  },
  data() {
    return {};
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.currency {
  margin-top: 30px;
  display: flex;
  align-items: center;
  line-height: 1;
  padding: 10px 0;
  .currency-logo {
    width: 76px;
    height: 76px;
    margin-right: 20px;
    img {
      width: 100%;
      display: block;
    }
  }
  .name {
    font-size: 32px;
    font-weight: 500;
    color: #2c2c2c;
  }
  .price {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-weight: 500;
    &-new {
      font-size: 32px;
      color: #2c2c2c;
      margin-bottom: 10px;
    }
    &-old {
      font-size: 24px;
      color: #919191;
    }
  }
}
</style>
